/*
* @Author: Yejing
* @Date: 2023-06-10 10:31:21
* @LastEditors: Yejing
* @LastEditTime: 2023-06-12 14:55:35
* @Description: desc
*/
<template>
	<view>
		<c-layout>
			<c-navigation-bar slot="head" :is-search="true">
			</c-navigation-bar>
			<view class="content">
				<view class="product" v-for="item in carList.list" :key="item.id">
					<view class="left">
						<u-image :src="$u.file.getMedieUrl(item.image)" width="160rpx" height="154rpx"></u-image>
						<view class="text">
							<text class="name remove">{{ item.goodsName }}</text>
							<text class="intro remove">{{ item.goodsDesc }}</text>
						</view>
					</view>
					<u-button @click="goodClick(item)">
						<u-icon name="arrow-right"></u-icon>
					</u-button>
				</view>
			</view>
		</c-layout>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: {
					navThmen: 'line',
					navPlaceholder: this.$t('searchInfo.keywordQuery'),
					navType: 'search'
				},
				carList: {
					list: {},
					data: {
						"pageSize": 20,
						"pageNum": 1,
						"startTime": "",
						"endTime": "",
						"id": "",
						"name": ""
					},
					get: false
				}
			};
		},
		onLoad(data) {
			this.getGoodsByVideoId(data.videoId)
		},
		methods: {
			goodClick(data) {
				console.log(data, '商品id');
				this.$u.route('/pages/productDetails/productDetails', {
					productId: data.id
				})
			},
			// 获取商品 通过 videoId
			getGoodsByVideoId(id) {
				this.$u.post('/app/short/video/getShopGoodsInfoByVideo', {
					...this.carList.data,
					id
				}).then(res => {
					console.log(res, 'res');
					this.carList.get = true
					this.carList.list = res.data.records
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin: 0 40rpx;
	
		.remove {
			overflow: hidden; //超出隐藏
			text-overflow: ellipsis; //溢出显示省略号
			white-space: normal; //常规默认，会折行
			display: -webkit-box;
			-webkit-box-orient: vertical; //子元素排列 vertical（竖排）orhorizontal（横排）
			-webkit-line-clamp: 2;
			/*内容限制的行数 需要几行写几就行*/
		}
		.product+.product{
			margin-top: 20rpx;
		}
		.product {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 20rpx;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			opacity: 1;
			border: 2rpx solid #E1E8E8;

			.left {
				display: flex;
				width: calc(100% - 100rpx);

				.text {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 10rpx;
					font-size: 24rpx;
					color: #91909A;
					width: calc(100% - 170rpx);

					uni-text {
						&:nth-child(1) {
							font-size: 28rpx;
							color: #1B1D29;

						}

					}
				}
			}

			.u-btn {
				padding: 0;
				width: 52rpx;
				height: 52rpx;
				background: #2934D0;
				opacity: 1;
				color: #fff;
			}
		}

		.item {
			border-radius: 14rpx;
			padding: 20rpx;
			border: 2rpx solid #E1E8E8;
			display: flex;
			margin-bottom: 30rpx;
			align-items: center;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 14rpx;
			}

			.info {
				margin-left: 12rpx;
				font-size: 28rpx;
				font-family: SFUIDisplay-Medium, SFUIDisplay;
				font-weight: 500;
				color: #1B1D29;
				display: flex;
				flex-direction: column;
				height: 140rpx;
				justify-content: space-between;
				margin-right: 12rpx;
				flex: 1;
				overflow: hidden;
				flex-wrap: nowrap;
			}

			.btn {
				background: #1B1D29;
				border-radius: 14rpx;
				padding: 10rpx 14rpx;
			}
		}
	}

	.slot {
		height: 200rpx;
	}
</style>